<template>
  <div class="menu-demo">
    <a-menu mode="horizontal" :default-selected-keys="['1']">
      <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }">
        OSHI监控案例
      </a-menu-item>
      <a-menu-item key="/" @click="navTo('/')">首页</a-menu-item>
      <a-menu-item key="/cpu" @click="navTo('/cpu')">CPU监控</a-menu-item>
      <a-menu-item key="/memory" @click="navTo('/memory')">内存监控</a-menu-item>
      <a-menu-item key="4" @click="navTo('/disk')">磁盘监控</a-menu-item>
    </a-menu>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const navTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  /* padding: 40px; */
  background-color: var(--color-neutral-2);
}
</style>